<template>
  <div class="data-theme-module">
    <div class="main">
      <Row justify="space-between">
        <Col class="Col1" flex="830px">
          <div class="more-text">
            <span>主题服务</span>
          </div>

          <Row :gutter="[20, 20]">
            <Col v-for="(item, index) in moduleList" :key="index" :span="8">
              <div v-if="item.data.itemType !== 'outter_link'" class="data-theme-module-box" :class="item.data.valid === '0'?'valid':''">
                <div class="maintenance">系统维护中</div>
                <router-link target="_blank" v-if="item.data.valid!=='0'" :to="{path:`/themeService/detail/${item.data.itemId}`}">
                  <div class="data-smb" :class="`imd${index % 3}`">
                    <span
                      class="data-theme-module-img"
                      :style="`background-position: -${(index % 3) * 64}px -${
                        Math.floor(index / 3) * 64
                      }px`"
                    >
                    </span>
                    <div class="describe">
                      <h3>{{ item.data.itemName }}</h3>
                      <p>{{ item.data.bizDesc }}</p>
                    </div>
                    <div class="themeServiceIcon"><img :src="themeServiceIcon" alt=""></div>
                  </div>
                </router-link>
                <a href="javascript:" v-else>
                  <div class="data-smb" :class="`imd${index % 3}`">
                    <span
                        class="data-theme-module-img"
                        :style="`background-position: -${(index % 3) * 64}px -${
                        Math.floor(index / 3) * 64
                      }px`"
                    >
                    </span>
                    <div class="describe">
                      <h3>{{ item.data.itemName }}</h3>
                      <p>{{ item.data.bizDesc }}</p>
                    </div>
                    <div class="themeServiceIcon"><img :src="themeServiceIcon" alt=""></div>
                  </div>
                </a>
              </div>

              <div v-else class="data-theme-module-box" :class="item.data.valid === '0'?'valid':''">
                <a :target="item.data.valid === '0'?'_self':'_blank'"
                   :href="item.data.valid === '0'?'javascript:':item.data.itemUrl"
                >
                  <div class="data-smb imd12">
                    <span class="data-theme-module-img imds">
                    </span>
                    <div class="describe">
                      <h3>{{item.data.itemName}}</h3>
                      <p></p>
                    </div>
                    <div class="themeServiceIcon"><img :src="themeServiceIcon" alt=""></div>
                  </div>
                </a>
              </div>
            </Col>


            <!--  下面是写死的外网三个链接  -->

            <Col :key="10" :span="8">
              <div class="data-theme-module-box">
          <!--<a target="_blank" href="http://jsy.xjjs.gov.cn:5002/asite/xjgczljd/jsp/index.jsp">-->
              <a href="javascript:" @click="info">
                  <div class="data-smb imd11">
                    <span class="data-theme-module-img imds">
                    </span>
                    <div class="describe">
                      <h3>工程质量监督</h3>
                      <p></p>
                    </div>
                    <div class="themeServiceIcon"><img :src="themeServiceIcon" alt=""></div>
                  </div>
                </a>
              </div>
            </Col>

            <Col :key="10" :span="8">
              <div class="data-theme-module-box">
                <a target="_blank" href="http://220.171.42.84:5016">
                  <div class="data-smb imd12">
                    <span class="data-theme-module-img imds">
                    </span>
                    <div class="describe">
                      <h3>装配式建筑评价信息管理平台</h3>
                      <p></p>
                    </div>
                    <div class="themeServiceIcon"><img :src="themeServiceIcon" alt=""></div>
                  </div>
                </a>
              </div>
            </Col>

            <Col :key="10" :span="8">
              <div class="data-theme-module-box" >
                <a target="_blank" href="http://jsy.xjjs.gov.cn:5010/asite/tzxm/index.jsp" >
                  <div class="data-smb imd13">
                    <span class="data-theme-module-img imds">
                    </span>
                    <div class="describe">
                      <h3>自治区住建行业固定资产投资</h3>
                      <p></p>
                    </div>
                    <div class="themeServiceIcon"><img :src="themeServiceIcon" alt=""></div>
                  </div>
                </a>
              </div>
            </Col>

            <Col :key="10" :span="8">
              <div class="data-theme-module-box">
                <a target="_blank" href="http://jsy.xjjs.gov.cn:8030/c/apply/complaint" >
                  <div class="data-smb imd14">
                    <span class="data-theme-module-img imds">
                    </span>
                    <div class="describe">
                      <h3>房屋建筑工程质量投诉</h3>
                      <p></p>
                    </div>
                    <div class="themeServiceIcon"><img :src="themeServiceIcon" alt=""></div>
                  </div>
                </a>
              </div>
            </Col>

            <Col :key="10" :span="8">
              <div class="data-theme-module-box">
                <a target="_blank" href="http://jsy.xjjs.gov.cn:8030/qyItemApply/pub/10" >
                  <div class="data-smb imd15">
                    <span class="data-theme-module-img">
                    </span>
                    <div class="describe">
                      <h3>分部分项验收公示</h3>
                      <p></p>
                    </div>
                    <div class="themeServiceIcon"><img :src="themeServiceIcon" alt=""></div>
                  </div>
                </a>
              </div>
            </Col>

            <Col :key="10" :span="8">
              <div class="data-theme-module-box">
                <a target="_blank" href="http://jsy.xjjs.gov.cn:8030/qyItemApply/pub/20" >
                  <div class="data-smb imd16">
                    <span class="data-theme-module-img">
                    </span>
                    <div class="describe">
                      <h3>分户验收公示</h3>
                      <p></p>
                    </div>
                    <div class="themeServiceIcon"><img :src="themeServiceIcon" alt=""></div>
                  </div>
                </a>
              </div>
            </Col>

          </Row>
        </Col>
        <Col class="Col2" flex="330px">
          <div class="more-text">
            <span>服务动态</span>
          </div>
          <div class="service-dynamics">
            <div class="picbox">
              <img src="/public/resource/image/online.png" alt="" />
            </div>
            <div class="service-dynamics-list">
                <div class="item" v-for="(item, index) in dynamicsList" :key="index" @click="top">
                  <router-link target="_blank" :to="`/articleDetail/${item.article_id}`">
                    <div class="item-type">{{item.tag_names}}</div>
                    <div class="item-label">{{item.article_title}}</div>
                    <div class="desc">{{item.article_summary}}</div>
                  </router-link>

                </div>
            </div>
          </div>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script lang="ts" >
import {defineComponent, onMounted, ref } from "vue";
import { Row, Col , Modal } from "ant-design-vue";
import themeServiceIcon from '/@/assets/img/theme-service-icon.png';
import { getItemTreeApi , getArticleListApi } from '/@/api/theme';
import { top } from '/@/utils';

export default defineComponent({
  name: "ThemeModule",
  components: { Row, Col },
  setup() {
    const dynamicsList = ref([]);
    const moduleList = ref([]);

    const getItemTree = async () => {
      const Param = {
        includeSelf:false,
        itemId:'cms_ztfw'
      }
      let { success , data } = await getItemTreeApi(Param);
      if(success){
        moduleList.value = data
      }
    }


    const getArticleList = async () => {
      const Param = {
        current:1,
        size:10,
        itemId:'cms_fwdt'
      }
      let { success , data } = await getArticleListApi(Param);
      if(success){
        dynamicsList.value = data.records;
      }
    }

    const init = () => {
      getItemTree();
      getArticleList()
    }

    const info = () => {
      Modal.info({
        title: '温馨提示',
        content: '网站内容已迁移到质量安全监督社区（近期开放）',
        //maskClosable: true,
        //centered: true,
        okText: '我知道了'
      })
    };

    onMounted(init)

    return {
      dynamicsList,
      themeServiceIcon,
      moduleList,
      top,
      info
    };
  },
});
</script>

<style lang="less" scoped>
.data-theme-module {
  padding: 40px 0 100px;
  background: white;

  .main {
    .Col1 {
      .more-text {
        margin-bottom: 20px;
        border-bottom: 1px solid #e0e5eb;

        span {
          display: inline-block;
          padding-bottom: 10px;
          font-size: 22px;
          font-weight: bold;
          line-height: 33px;
          color: #000;
          border-bottom: 3px solid #cd1922;
        }
      }
    }

    .Col2 {
      .more-text {
        margin-bottom: 20px;
        border-bottom: 1px solid #e0e5eb;

        span {
          display: inline-block;
          padding-bottom: 10px;
          font-size: 22px;
          font-weight: bold;
          line-height: 33px;
          color: #000;
          border-bottom: 3px solid transparent;
        }
      }
    }



    .service-dynamics {
      width: 330px;

      .picbox {
        height: 180px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .service-dynamics-list {
        .item {
          padding: 20px 0;
          cursor: pointer;
          border-bottom: 1px dashed #E0E5EB;


          .item-type {
            display: inline-block;
            padding: 4px 8px;
            font-size: 13px;
            font-weight: bold;
            line-height: 18px;
            color: #0078FF;
            border: 1px solid #0078FF;
            border-radius: 2px;
          }

          .item-label {
            width: 100%;
            margin: 10px 0 4px;
            overflow: hidden;
            font-size: 16px;
            font-weight: bold;
            line-height: 24px;
            color: black;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .desc {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: #111;
          }
        }
      }
    }

    .data-theme-module-box {
      position: relative;

      .themeServiceIcon {
        position: absolute;
        right: 0;
        bottom: 0;
      }

      .data-smb {
        height: 200px;
        padding: 16px 18px;
        cursor: pointer;
        background: linear-gradient(315deg, #EDF1F5 0%, #F6F7F8 100%);
        transition: all .3s ease;


        &.imd11 span{
          background-position: 0 0;
        }

        &.imd12 span{
          background-position: -64px 0;
        }

        &.imd13 span{
          background-position: -128px 0;
        }

        &.imd14 span{
          background-position: -192px 0;
        }

        &.imd15 span{
          background-position: -64px 0;
        }

        &.imd16 span{
          background-position: -128px 0;
        }

        span {
          display: block;
          width: 64px;
          height: 64px;
          background-image: url(/src/assets/img/theme-service.png);

          &.imds{
            background-image: url(/src/assets/img/theme-service3.png);
          }

          &:first-child {
            margin-right: 15px;
          }

        }

        .describe {
          h3 {
            font-size: 16px;
            font-weight: bold;
            color: #000;
          }

          p {
            font-size: 14px;
            line-height: 20px;
            color: #888;
          }
        }

        &:hover {
          transform: scale(1.06);
          box-shadow: 0 4px 8px 0 rgb(49 161 255 / 30%);
        }

      }

      .maintenance{
        position: absolute;
        top: 0;
        right: 0;
        z-index: 9;
        display: none;
        justify-content: center;
        align-items: center;
        width: auto;
        height: 30px;
        padding: 5px 15px;
        font-size: 16px;
        color: white;
        background: rgba(255,0,0,.9);
        border-radius: 3px;
      }

      &.valid {


        .maintenance{
          display: flex;
        }

        a{
          cursor: default;

          .data-smb {
            cursor: default;
            background: #f5f5f5;
            border: 1px solid #e8eaee;

            &::before {
              background: #9b9fa7;
            }

            &:hover {
              transform: scale(1);
              box-shadow: none;
            }

            .describe {
              h3,
              p {
                color: #999;
              }
            }
          }
        }


      }
    }
  }
}
</style>
